/**
* @file  ComponentLibrary
* @author xiao_xie
* @date 2025-03-13
*/


import { Collapse } from 'antd';
import React, { useMemo } from 'react';
import useComponentConfigStore, { ComponentEnum, handleChangeComponentConfig } from '../../../store/componentConfig';
import ComponentButton from './ComponentButton'; // 新建的按钮组件
import './ComponentLibrary.less'; // 新建的样式文件

const ComponentLibrary: React.FC = () => {
    const { componentConfig } = useComponentConfigStore();
    const componentConfigObj = handleChangeComponentConfig(componentConfig);


    const items = useMemo(() => {
        return Object.entries(componentConfigObj).map(([key, elements]) => {
            return {
                key,
                label: (
                    <div className="collapse-header">
                        <span className="text-indigo-600 font-semibold text-base">
                            {key.toUpperCase()}
                        </span>
                    </div>
                ),
                children: (
                    <div className="component-grid">
                        {(elements as any[]).map((item) => {
                            if(item.name !== 'Page') 
                            return (
                                <ComponentButton
                                    key={item.name}
                                    name={item.name}
                                    desc={item.desc}
                                    title={item.desc}
                                    icon={item.icon} // 如果有图标可以传入
                                />
                            )
                        })}
                    </div>
                ),
                style: {
                    background: 'transparent',
                    border: 'none'
                }
            }
        });
    }, [componentConfigObj]);

    return (
        <div className="component-library-container">
            <Collapse
                bordered={false}
                expandIconPosition="end"
                expandIcon={({ isActive }) => (
                    <div className={`collapse-arrow ${isActive ? 'active' : ''}`}>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path d="M6 9l6 6 6-6" strokeWidth="2" strokeLinecap="round" />
                        </svg>
                    </div>
                )}
                items={items}
                defaultActiveKey={[ComponentEnum.Layout]}
            />
        </div>
    );
};

export default ComponentLibrary;
